<template>
  <!-- 我的页面 -->
  <view>
    <view class="navigator-box">
    </view>
    <!-- 用户信息开始 -->
    <view class="my-userinfo">
      <view class="userinfo-left">
        <view class="userinfo-img" >
          <image :src="user.headimg || '../../static/active-my.png'" mode=""></image>
        </view>
        <view class="" @click="userinfo" v-if="token!==''">
          <view class="user-phone">
            {{user.phone}}
          </view>
          <view class="user-uid">
            <text>UID：</text>
            <text>{{user.id}}</text>
            <text class="fuzhi-text">复制</text>
          </view>
        </view>
        <view class="login-text" @click="login" v-else>
          登录
        </view>
      </view>
      <view class="qiandao-box">
        <u-icon name="calendar"></u-icon>
        <text class="qiandao">签到</text>
      </view>
    </view>
    <!-- 用户信息结束 -->
    <!-- 加入vip开始 -->
    <view class="vip-box">
      <view class="">
        <view class="">
          普通用户
        </view>
        <view class="">
          加入VIP,享受会员才有的特权
        </view>
      </view>
      <view class="">
        <u-button type="primary" size="mini" shape="circle" @click="openvip">去开通</u-button>
      </view>
    </view>
    <!-- 加入vip结束 -->
    <!-- 导航部分 -->
    <view class="nav-box">
      <view class="nav-list" v-for="(item,i) in navlist" :key="i" @click="navigation(i)">
        <view class="nav-img">
          <image :src="item.img" mode=""></image>
        </view>
        <text>{{item.title}}</text>
      </view>
    </view>
   <!-- 导航部分结束 -->
    <u-cell-group  :border="false" v-for="(item,index) in list" :key="index">
		<u-cell-item class="cellitem" hover-class="none" :title-style="{'color':'#FFFFFF'}" :border-bottom="false" :title="item.title" bg-color="#000000"  @click="bottomlist(index)">
      <text slot="icon"><image class="icon-text" :src="item.icon" mode=""></image></text>
    </u-cell-item>
	</u-cell-group>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        user:{}, // 用户信息
        token:'', // 验证是否登录
          navlist:[{
            img:'../../static/message.png',
            title:'我的消息'
          },{
            img:'../../static/mymoney.png',
            title:'我的钱包'
          },{
            img:'../../static/friends.png',
            title:'邀请好友'
          },{
            img:'../../static/huodong.png',
            title:'活动中心'
          }],
          list:[{
            icon:'../../static/anquan.png',
            title:'充值USD'
          },{
            icon:'../../static/anquan.png',
            title:'购买合伙人资格'
          },{
            icon:'../../static/anquan.png',
            title:'安全'
          },{
            icon:'../../static/lianxiwomen.png',
            title:'联系我们'
          },{
            icon:'../../static/aboutme.png',
            title:'关于我们'
          },{
            icon:'../../static/setting.png',
            title:'设置'
          }]
      }
    },
    onShow() {
      this.uid=getApp().globalData.uid,
      this.token=getApp().globalData.token
      this.getuserinfo() // 获取个人信息
    },
    methods: {
      // 跳转到用户信息
        userinfo(){
          uni.navigateTo({
            url:'../../subpkg/userinfo/userinfo'
          })
        },
        // 导航跳转
        navigation(i){
          if(i==0){
            // 跳转到我的消息页面
            uni.navigateTo({
              url:'../../subpkg/message/message'
            })
          }else if(i==1){
            // 跳转到我的我的钱包页面
            uni.navigateTo({
              url:'../../subpkg/mywallet/mywallet'
            })
          }else if(i==2){
            // 跳转到邀请好友页面
            uni.navigateTo({
              url:'../../subpkg/friends/friends'
            })
          }else if(i==3){
            // 跳转到活动中心页面
            uni.navigateTo({
              url:'../../subpkg/activity/activity'
            })
          }
        },
        // 底部列表跳转
        bottomlist(index){
          if(index==0){
            // 跳转到购买合伙人资格
            uni.navigateTo({
              url:'../../subpkg/chongzhiUSD/chongzhiUSD'
            })
          }else if(index==1){
            // 跳转到购买合伙人资格
            uni.navigateTo({
              url:'../../subpkg/qualifications/qualifications'
            })
          }else if(index==2){
            // 跳转到安全页面
            uni.navigateTo({
              url:'../../subpkg/security/security'
            })
          }else if(index==3){
            // 跳转到联系我们页面
            uni.navigateTo({
              url:'../../subpkg/contactus/contactus'
            })
          }else if(index==4){
            // 跳转到关于我们页面
            uni.navigateTo({
              url:'../../subpkg/aboutme/aboutme'
            })
          }else if(index==5){
            // 跳转到设置页面
            uni.navigateTo({
              url:'../../subpkg/settings/settings'
            })
          }
        }
        // 开通vip页面
        ,openvip(){
         uni.navigateTo({
           url:'../../subpkg/openvip/openvip'
         }) 
        },
        // 登录页面
        login(){
          uni.navigateTo({
            url:'../../subpkg/login/login'
          }) 
        },
        // 获取个人信息
        async getuserinfo(){
          const {data:res}= await this.$myHttp({
            method:'POST',
            url:'shows/index/get_user_info',
            data:{
              uid:uni.getStorageSync('uid'),
              token:uni.getStorageSync('token')
            }
          })
          if(res.code==200){
            this.user=res.data
          }else{
            uni.showToast({
              title:res.msg,
              icon:'none'
            })
          }
        },
    }
  }
</script>

<style>
  page {
    color: #FFFFFF;
    background-color: #000000;
  }
.navigator-box{
  height: 66rpx;
  width: 100%;
  background-color: #FFFFFF;
  color:"#FFFFFF";
  margin-bottom: 80rpx;
  z-index: 999;
}
  .my-userinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    margin-left: 40rpx;
    margin: 60rpx 0 60rpx 40rpx;
  }

  .userinfo-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .userinfo-img {
    width: 90rpx;
    height: 90rpx;
    overflow: hidden;
    margin-right: 20rpx;
    border-radius: 20rpx;
  }

  .userinfo-img image {
    width: 100%;
    height: 100%;
  }

  .user-phone {
    font-size: 36rpx;
    margin-bottom: 6rpx;
  }

  .user-uid {
    font-size: 24rpx;
    color: #858697;
  }

  .fuzhi-text {
    color: #FFFFFF;
    font-size: 24rpx;
    padding: 0 6rpx;
    background-color: #007AFF;
    border-radius: 10rpx;
    margin-left: 10rpx;
  }

  .qiandao-box {
    width: 160rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #131a2a;
    border-radius: 40rpx 0 0 40rpx;
    font-size: 32rpx;
    text-align: center;
  }

  .qiandao {
    margin-left: 20rpx;
  }

  .vip-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 130rpx;
    margin: 40rpx;
    font-size: 30rpx;
    color: #007AFF;
    background-image: linear-gradient(#dfe5ff, #cbe0fb);
    padding: 0 40rpx;
    border-radius: 20rpx;
  }
  .nav-box{
    display: flex;
    justify-content: space-around;
    margin: 60rpx 0;
  }
  .nav-img{
    width: 55rpx;
    height: 55rpx;
    overflow: hidden;
    margin-bottom: 12rpx;
  }
  .nav-img image{
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
  .nav-list{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cellitem{
    color: #FFFFFF;
  }
  .icon-text{
    height: 38rpx;
    width: 40rpx;
    color: #FFFFFF;
    vertical-align: middle;
    margin-right: 20rpx;
  }
  .login-text{
    font-size: 36rpx;
  }
</style>
